<template>
    <view>
        <view class="top1">
            <view class="userInfo">
                <div class="flex user-photo">
                    <image :src="userMsg.image || 'https://pic.bangbangtongcheng.com/static/my/header.png'"
                        class="header-img"></image>
                </div>
                <view class="user" v-if="userMsg.phone">
                    <view class="name">
                        <!-- <view class="user-name">万事达卡省的事达卡省事达卡省</view> -->
                        <view class="user-name">{{ userMsg.nikeName }}</view>

                        <view class="user-label">
                            <view class="vip-label">
                                <view class="vip-level">
                                    <text class="vip-rank"
                                        :style="{backgroundColor: colors[userMsg.memberLevel-1].bgColor,borderColor: colors[userMsg.memberLevel-1].lineColor,color:colors[userMsg.memberLevel-1].wordColor}"
                                        @click="goMyLevel">{{userMsg.memberLevelTitle}}</text>

                                </view>
                                <view class="star-vip">
                                    <text class="all-dot">累计帮帮豆：{{userMsg.integral}}</text>
                                </view>
                            </view>

                        </view>
                    </view>
                    <view class="info flex" v-if="userMsg.isGz == 1">
                        <u-icon color="#fff" style="margin-right: 10rpx;" name="checkmark-circle-fill"></u-icon> 已关注公众号
                    </view>
					<view class="info flex" v-else>
                        <u-icon color="#fff" style="margin-right: 10rpx;" name="close-circle-fill"></u-icon> 未关注公众号
                    </view>
                </view>
            </view>
        </view>

        <view class="recent">
            <view class="date-select">
                {{activityInfo.startTime}} <text>至</text> {{activityInfo.overTime}}
            </view>
            <view class="repost flex" v-for="(item,i) in actList" :key="i">
                <view class="title">
                    {{item.title}}
                </view>
                <view class="times">
                    {{item.num}}次/100次
                </view>
            </view>
            <view class="vip-finish flex">
                <view class="right" :class="{left: over }">
                    当前会员已达标
                </view>
                <view class="right" :class="{left: !over }">
                    当前会员未达标
                </view>
            </view>
        </view>
        <u-gap height="10" bgColor="#F2F2F2"></u-gap>
        <view class="all-data">
            <view class="repost flex">
                <view class="title">
                    注册时间
                </view>
                <view class="times">
                    {{activityInfo.createDate}}
                </view>
            </view>
            <view class="repost flex" v-for="(item,i) in sumList" :key="i">
                <view class="title">
                    累计{{item.title}}
                </view>
                <view class="times">
                    {{item.num}}次
                </view>
            </view>
        </view>
		<uniBall></uniBall>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                starLevel: 4,
                imgUrl: this.$imgSrc,
                phone: "",
                userInfo: uni.getStorageSync("Pduser"),
                tipsList: [],
                userInfo1: {
                    openid: "",
                    headimgurl: "",
                    nickname: "",
                    unionid: ""
                },
                autoStatus: true,
                system: '',
                platform: '',
                data: [],
                activityInfo: {},
                actList: [],
                sumList: [],
                userMsg: {},
                collectBl: false,
                transpondBl: false,
                publishBl: false,
                finish: false,
                userId: "",
                colors: [{
                        bgColor: "#E9EFEF",
                        wordColor: "#60807D",
                        lineColor: "#B6C4C3",
                        level: "青铜会员"
                    },
                    {
                        bgColor: "#F7F7F7",
                        wordColor: "#A3AAB0",
                        lineColor: "#D2D9E0",
                        level: "白银会员"
                    },
                    {
                        bgColor: "#FFF8DE",
                        wordColor: "#CEAB21",
                        lineColor: "#D3CAB2",
                        level: "黄金会员"
                    },
                    {
                        bgColor: "#EDFAFF",
                        wordColor: "#59B0E6",
                        lineColor: "#BBD0DB",
                        level: "铂金会员"
                    },
                    {
                        bgColor: "#F2F5FF",
                        wordColor: "#284EB6",
                        lineColor: "#C1CBEF",
                        level: "钻石会员"
                    },
                    {
                        bgColor: "#FDF7FF",
                        wordColor: "#A877C6",
                        lineColor: "#DBC6E8",
                        level: "钻石Ⅰ会员"
                    },
                    {
                        bgColor: "#F8F2FF",
                        wordColor: "#78439F",
                        lineColor: "#958AC3",
                        level: "钻石Ⅱ会员"
                    },
                    {
                        bgColor: "#F4F2F2",
                        wordColor: "#8D4581",
                        lineColor: "#907B8C",
                        level: "钻石Ⅲ会员"
                    },
                    {
                        bgColor: "#F4F2F2",
                        wordColor: "#502E30",
                        lineColor: "#795D5E",
                        level: "王者会员"
                    },
                ],
                
            }
        },
        onLoad(opts) {
            this.userId = opts.userId || this.userInfo.id;
            this.getData()
        },
        computed: {
            over() {
                let fini = false
                if (this.collectBl && this.publishBl && this.transpondBl) {
                    this.finish = true;
                }

                return fini
            }
        },
        methods: {
            goMyLevel() {
                uni.navigateTo({
                    url: "/pages_my/bangClub"
                })
            },
            getData() {
                this.$myRequest
                    .get("/mob/iteration/selectUserActivitySum", {
                        userId : this.userId,
                    }).then(res => {
                        console.log(111111111111, res)
                        this.activityInfo = res.activityInfo;
                        this.actList = res.actList;
                        this.sumList = res.sumList;
                        this.userMsg = res.userInfo;

                        this.actList.forEach((val, index) => {
                            if (val.title == "关注/收藏(楼盘、门店、用户、房源、看点)") {
                                if (val.num > this.activityInfo.collect) {
                                    this.collectBl = true
                                }
                            } else if (val.title == "发布房源") {
                                if (val.num > this.activityInfo.publish) {
                                    this.publishBl = true
                                }
                            } else if (val.title == "转发房源") {
                                if (val.num > this.activityInfo.transpond) {
                                    this.transpondBl = true
                                }
                            }
                            console.log(this.transpondBl, this.publishBl = true, this.collectBl = true)
                        })
                    })
            },
        }
    }
</script>

<style lang="less" scoped>
    page {
        background-color: #fff;
    }

    .header-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }

    .all-data {
        padding: 43rpx 40rpx 40rpx;

        .repost {
            align-items: center;
            margin-bottom: 24rpx;
            font-size: 28rpx;
            color: #333333;

            .times {
                margin-left: 32rpx;
                color: #64B6A8;
            }
        }
    }

    .recent {
        padding: 43rpx 40rpx 40rpx;

        .date-select {
            margin-bottom: 40rpx;
        }

        .repost {
            margin-bottom: 24rpx;
            font-size: 28rpx;
            color: #333333;

            .times {
                margin-left: 32rpx;
                color: #64B6A8;
            }
        }

        .vip-finish {
            margin-top: 16rpx;
            font-size: 28rpx;


            .right {
                margin-right: 24rpx;
                padding: 9rpx 22rpx;
                background-color: #fff;
                color: #64B6A8;
                border: 1rpx solid #64B6A8;
                border-radius: 7rpx 7rpx 7rpx 7rpx;
            }

            .left {
                margin-right: 24rpx;
                padding: 9rpx 22rpx;
                background: #64B6A8;
                color: #fff;
                border-radius: 7rpx 7rpx 7rpx 7rpx;
            }
        }
    }

    .user-photo {
        flex-direction: column;
        align-items: center;
        margin: 0 32rpx 0 0;

        .label-box {
            div {
                position: relative;
                color: #FFFFFF;
                font-size: 22rpx;
                margin-top: 12rpx;

                image {
                    width: 115rpx;
                    height: 50rpx;
                }

                text {
                    width: 100%;
                    text-align: center;
                    position: absolute;
                    font-size: 22rpx;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -75%);
                }
            }
        }

    }

    .user-label {
        display: flex;
        justify-content: space-between;

        .vip-label {
            .vip-level {
                margin-bottom: 22rpx;

                .vip-rank {
                    padding: 3rpx 10rpx;
                    margin: 0 18rpx 0 0;
                    background: #F6F0FF;
                    border-radius: 6rpx 6rpx 6rpx 6rpx;
                    opacity: 1;
                    border: 2rpx solid #BD90D9;
                    font-size: 24rpx;
                    font-weight: 500;
                    color: #BD90D9;
                }


            }

            .star-vip {
                display: flex;
                align-items: center;
                width: 438rpx;
                justify-content: space-between;

                .all-dot {
                    font-size: 24rpx;
                    font-weight: 500;
                }

            }
        }
    }

    .info {
        position: absolute;
        right: 40rpx;
        bottom: 15rpx;
        // width: 160rpx;
        font-size: 24rpx;
        border-radius: 100rpx;
        color: #fff;
        text-align: center;
        // margin-left: 60rpx;
        /* #ifdef MP-WEIXIN */
        // padding: 0rpx 10rpx;
        // margin-left: 100rpx;
        /* #endif */
    }

    .top1 {
        // height: 680rpx;
        width: 100%;
        padding-bottom: 1rpx;
        background: #64b6a8;

        .title {
            text-align: center;
            // height: 88rpx;
            line-height: 88rpx;
            font-size: 36rpx;
            color: #fff;
            margin-bottom: 30rpx;
            // line-height: 46rpx;
        }

        line-height: 32rpx;

        .userInfo {
            display: flex;
            width: 100%;
            padding: 40rpx 30rpx 0;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 30rpx;

            .header-img {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
            }

            .user {
                justify-content: space-between;
                padding-top: 11rpx;
                padding: 11rpx 0 0 0;
                background: transparent;
                border: none;
                margin: 0;
                // margin-left: 45rpx;
                /* #ifdef MP-WEIXIN */
                // margin-left: 45rpx;
                /* #endif */

                .name {
                    position: relative;
                    color: #fff;
                    margin-bottom: 14rpx;

                    .user-name {
                        font-size: 36rpx;
                        line-height: 50rpx;
                        margin-bottom: 33rpx;
                    }

                    .info {
                        position: relative;
                        right: 0rpx;
                        width: 160rpx;
                        font-size: 24rpx;
                        padding: 5rpx 20rpx;
                        border-radius: 100rpx;
                        border: 2rpx solid #fff;
                        text-align: center;
                        // margin-left: 60rpx;
                        /* #ifdef MP-WEIXIN */
                        // font-size: 24rpx;
                        // padding: 0rpx 10rpx;
                        // border-radius: 100rpx;
                        // border: 2rpx solid #fff;
                        // text-align: center;
                        // margin-left: 100rpx;
                        /* #endif */
                    }
                }
            }
        }


    }
</style>
